<template>
    <div>
        <el-card>
            <el-page-header content="用户列表" icon="" title="用户管理">

            </el-page-header>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="username" label="用户名" width="" />
                <el-table-column prop="avatar" label="头像" width="">
                    <template #default="scope">
                        <div v-if="scope.row.avatar">
                            <el-avatar :size="50" :src="'http://localhost:3000' + scope.row.avatar">
                            </el-avatar>
                        </div>
                        <div v-else>
                            <el-avatar :size="50" src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png">
                            </el-avatar>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="role" label="角色">
                    <template #default="scope">
                        <!-- {{ scope.row.role && scope.row.role==1?"管理":"编辑" }} -->
                        <el-tag v-if="scope.row.role === 1" class="m1-2" type="danger">
                            管理员
                        </el-tag>
                        <el-tag v-else class="m1-2" type="info">
                            编辑
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleEdit(scope.row)">
                            编辑
                        </el-button>
                        <el-button link type="danger" size="small" @click="handleDelete(scope.row)" >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios';

let tableData = ref([])

onMounted(() => {
    getTableData()
})

const getTableData = async () => {
    const res = await axios.get("/adminapi/user/list")
    //  console.log(res.data.data)
    tableData.value = res.data.data

}
</script>